<template>
  <div class="app-content">
    <div class="search-content">
      <Title title="周界数据"></Title>
    </div>
    <el-tabs
      type="border-card"
      v-model="activeName"
      @tab-click="handleClick"
      :style="conheight"
      v-if="page == 0"
    >
      <el-tab-pane label="GM管" name="first" class="work-tab">
        <span slot="label" style="font-size: 14px; height: 16px">
          <img
            alt=""
            src="../../../../assets/images/perimeter/hjjll-l.png"
            style="height: 14px; width: 14px; margin: auto; margin-right: 8px"
            v-if="heightlight == 1 ? true : false"
          />
          <img
            alt=""
            src="../../../../assets/images/perimeter/hjjll-h.png"
            style="height: 14px; width: 14px; margin: auto; margin-right: 8px"
            v-else
          />
          GM管
        </span>
        <el-form :inline="true" :model="formInline1">
          <el-form-item label="设备名称：">
            <el-input
              v-model="formInline1.name"
              placeholder="请输入"
              style="height: 32px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="search1"
              icon="el-icon-search"
              size="mini"
              >搜索</el-button
            >
            <el-button @click="reset1" icon="el-icon-refresh" size="mini"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <div class="title">
          <div class="title-name">报表详情:</div>
          <div class="title-refresh" @click="getPerimeterData(0)">
            <i class="el-icon-refresh" style="margin-right: 8px"></i>刷新
          </div>
        </div>
        <el-table
          :data="tableData1"
          class="tableBox"
          stripe
          :max-height="conheight2.height"
          :key="1"
        >
          <el-table-column label="序号" prop="index" width="55">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="deviceTime"
            label="具体时间"
            width="280"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="stationName"
            label="站点名称"
            align="center"
            :filters="stationList"
            :filter-method="filterHandler"
          >
          </el-table-column>
          <el-table-column prop="sysName" label="设备名称" align="center">
          </el-table-column>
          <el-table-column prop="doserate" label="环境剂量率" align="center">
            <template slot-scope="scope">
              {{ scope.row.doserate }} nSv/h
            </template>
          </el-table-column>
          <el-table-column
            label="检测状态"
            prop="status"
            align="center"
            width="180"
          >
            <template slot-scope="scope">
              <div style="display: flex; justify-content: center">
                <div
                  :class="
                    scope.row.status === '正常'
                      ? 'zc'
                      : scope.row.status === '一级报警'
                      ? 'yjbj'
                      : scope.row.status === '二级报警'
                      ? 'ejbj'
                      : 'lx'
                  "
                ></div>
                <div>{{ scope.row.status }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                :style="'padding:none'"
                @click="handleDetail1(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="电离室" name="third" class="work-tab">
        <span slot="label" style="font-size: 14px; height: 16px">
          <img
            alt=""
            src="../../../../assets/images/perimeter/dls-l.png"
            style="height: 14px; width: 14px; margin: auto; margin-right: 8px"
            v-if="heightlight == 3 ? true : false"
          />
          <img
            alt=""
            src="../../../../assets/images/perimeter/dls-h.png"
            style="height: 14px; width: 14px; margin: auto; margin-right: 8px"
            v-else
          />
          电离室
        </span>
        <el-form :inline="true" :model="formInline1">
          <el-form-item label="设备名称：">
            <el-input
              v-model="formInline3.name"
              placeholder="请输入"
              style="height: 32px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="search3"
              icon="el-icon-search"
              size="mini"
              >搜索</el-button
            >
            <el-button @click="reset3" icon="el-icon-refresh" size="mini"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <div class="title">
          <div class="title-name">报表详情:</div>
          <div class="title-refresh" @click="getPerimeterData(2)">
            <i class="el-icon-refresh" style="margin-right: 8px"></i>刷新
          </div>
        </div>
        <el-table
          :data="tableData3"
          class="tableBox"
          stripe
          :max-height="conheight2.height"
          :key="2"
        >
          <el-table-column label="序号" prop="index" width="55">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="deviceTime"
            label="具体时间"
            width="280"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="stationName"
            label="站点名称"
            align="center"
            :filters="stationList"
            :filter-method="filterHandler"
          >
          </el-table-column>
          <el-table-column prop="sysName" label="设备名称" align="center">
          </el-table-column>
          <el-table-column prop="doserate" label="环境剂量率" align="center">
            <template slot-scope="scope">
              {{ scope.row.doserate }} nSv/h
            </template>
          </el-table-column>
          <el-table-column
            label="检测状态"
            prop="status"
            align="center"
            width="180"
          >
            <template slot-scope="scope">
              <div style="display: flex; justify-content: center">
                <div
                  :class="
                    scope.row.status === '正常'
                      ? 'zc'
                      : scope.row.status === '一级报警'
                      ? 'yjbj'
                      : scope.row.status === '二级报警'
                      ? 'ejbj'
                      : 'lx'
                  "
                ></div>
                <div>{{ scope.row.status }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                :style="'padding:none'"
                @click="handleDetail3(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="谱仪" name="second" class="work-tab">
        <span slot="label" style="font-size: 14px">
          <img
            alt=""
            class="exit-img"
            src="../../../../assets/images/perimeter/np-l.png"
            style="height: 14px; width: 14px; margin-right: 8px"
            v-if="heightlight == 2 ? true : false"
          />
          <img
            alt=""
            class="exit-img"
            src="../../../../assets/images/perimeter/np-h.png"
            style="height: 14px; width: 14px; margin-right: 8px"
            v-else
          />
          谱仪
        </span>
        <el-form :inline="true" :model="formInline2">
          <el-form-item label="设备名称：">
            <el-input
              v-model="formInline2.name"
              placeholder="请输入"
              style="height: 32px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="search2"
              icon="el-icon-search"
              size="mini"
              >搜索</el-button
            >
            <el-button @click="reset2" icon="el-icon-refresh" size="mini"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <div class="title">
          <div class="title-name">报表详情:</div>
          <div class="title-refresh" @click="getPerimeterData(1)">
            <i class="el-icon-refresh" style="margin-right: 8px"></i>刷新
          </div>
        </div>
        <el-table
          :data="tableData2"
          :key="3"
          class="tableBox"
          stripe
          :max-height="conheight2.height"
        >
          <el-table-column label="序号" prop="index" width="55">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="deviceTime"
            label="具体时间"
            width="280"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="stationName"
            label="站点名称"
            align="center"
            :filters="stationList"
            :filter-method="filterHandler"
          >
          </el-table-column>
          <el-table-column prop="sysName" label="设备名称" align="center">
          </el-table-column>
          <el-table-column prop="doserate" label="环境剂量率" align="center"
            ><template slot-scope="scope">
              {{ scope.row.doserate }} nSv/h
            </template>
          </el-table-column>
          <el-table-column
            label="检测状态"
            prop="status"
            align="center"
            width="180"
          >
            <template slot-scope="scope">
              <div style="display: flex; justify-content: center">
                <div
                  :class="
                    scope.row.status === '正常'
                      ? 'zc'
                      : scope.row.status === '一级报警'
                      ? 'yjbj'
                      : scope.row.status === '二级报警'
                      ? 'ejbj'
                      : 'lx'
                  "
                ></div>
                <div>{{ scope.row.status }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                :style="'padding:none'"
                @click="handleDetail2(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- GM管详情 -->
    <gmDetail
      v-if="page == 1"
      :id="id"
      :status="status"
      :name="name"
      :sys="sys"
      :level1="level1"
      :level2="level2"
    ></gmDetail>

    <!-- 电离室详情 -->
    <dlsDetail
      v-if="page == 2"
      :id="id"
      :status="status"
      :name="name"
      :sys="sys"
      :level1="level1"
      :level2="level2"
    ></dlsDetail>
    <!-- 谱仪详情 -->
    <pyDetail
      v-if="page == 3"
      :id="id"
      :name="name"
      :sys="sys"
      :level1="level1"
      :level2="level2"
    ></pyDetail>
  </div>
</template>

<script>
import {
  mapFacInfoList,
  newDataList,
  listAll,
} from "@/api/emergency/perimeterData";
import Title from "../../../components/title";
import gmDetail from "./detail";
import dlsDetail from "./gDetail";
import pyDetail from "./pyDetailHis";
export default {
  name: "perimeterData",
  components: {
    gmDetail,
    dlsDetail,
    pyDetail,
    Title,
  },
  data() {
    return {
      tableData1: [], // 环境剂量率
      tableData2: [], // 能谱
      tableData3: [],
      // 查询数据备份-每次从这里面查询数据
      tableDataTemp1: [], // 环境剂量率
      tableDataTemp2: [], // 能谱
      tableDataTemp3: [],
      // 查询数据
      searchData1: [],
      searchData2: [],
      searchData3: [],
      // 暂存前端查询前的数据-用于重置
      resetData1: [],
      resetData2: [],
      resetData3: [],
      // 是否已查询
      flag1: false,
      flag2: false,
      flag3: false,
      // 查询表单
      formInline1: { name: "" },
      formInline2: { name: "" },
      formInline3: { name: "" },
      activeName: "first", // tab切换
      facType: 0, //设备类型
      stationList: [], // 筛选使用到的全部站点,
      // 图片
      img1h: "../../../../assets/images/perimeter/hjjll-h.png",
      img1l: "../../../../assets/images/perimeter/hjjll-l.png",
      img2h: "../../../../assets/images/perimeter/np-h.png",
      img2l: "../../../../assets/images/perimeter/np-l.png",
      firstImgl: true,
      heightlight: 1,
      conheight: {
        height: "",
      },
      conheight2: {
        height: "",
      },
      height: 550,
      page: 0, // 用于页面修改  0-数据列表页 1-GM管 2-电离室 3-谱仪
      // ========组件传值
      id: "",
      status: "",
      name: "",
      sys: "",
      level1: "",
      level2: "",
    };
  },
  created() {
    // 获取地图点位-一级阈值、二级阈值、离线阈值
    // this.getMapData();
    // 获取周界的实时数据
    this.getPerimeterData(0);
    // 获取前端筛选的站点列表
    this.getStationAll();

    // 3-电离室 1-GM管  2-谱仪
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  methods: {
    getHeight() {
      this.conheight.height = window.innerHeight - 172 + "px";
      this.height = window.innerHeight - 500;
      this.conheight2.height = window.innerHeight - 360 + "px";
      // console.log(this.conheight, "0000000");
    },
    // 获取地图点位-一级阈值、二级阈值、离线阈值
    getMapData() {
      mapFacInfoList().then((res) => {
        console.log(res);
      });
    },
    getPerimeterData(tab) {
      // 获取环境剂量率数据
      if (tab == 0) {
        //环境剂量率 gm管
        this.tableData1 = [];
      } else if (tab == 1) {
        // 能谱 谱仪
        this.tableData2 = [];
      } else {
        // 高气压电离室
        this.tableData3 = [];
      }
      let _this = this;
      var str = "/static/emergency/perimeterData/zjNewDataList" + tab + ".json";
      this.$axios.get(str).then((res) => {
        // newDataList({ facType: 0 }).then((res) => {
        if (res.data.data) {
          res.data.data.forEach((item, index, array) => {
            item.kind = 0;
          });
          res.data.data.forEach((item) => {
            if (_this.praseStrEmpty(item.deviceTime) != "") {
              item.deviceTime = this.parseTime(
                new Date(item.deviceTime),
                "{y}-{m}-{d} {h}:{i}:{s}"
              );
            }
          });
          res.data.data.forEach((item, index, array) => {
            if (
              _this.praseStrEmpty(item.deviceTime) == "" ||
              _this.praseStrEmpty(item.doserate) == ""
            ) {
              item.status = "离线";
            } else {
              var oo = this.parseTime(new Date(item.deviceTime));
              var ok = new Date(oo).getTime() / 1000; //得到毫秒数
              var no = this.parseTime(new Date());
              var nok = new Date(no).getTime() / 1000; //得到毫秒数
              var p = nok - ok;
              if (p > item.offlineThreshold) {
                item.status = "离线";
              } else if (item.doserate < item.levelOne) {
                item.status = "正常";
              } else if (
                item.levelOne < item.doserate &&
                item.doserate < item.levelTwo
              ) {
                item.status = "一级报警";
              } else if (item.levelTwo < item.doserate) {
                item.status = "二级报警";
              }
            }
          });
          if (tab == 0) {
            //环境剂量率 gm管
            this.tableData1 = res.data.data;
            this.tableDataTemp1 = res.data.data;
          } else if (tab == 1) {
            // 能谱 谱仪
            this.tableData2 = res.data.data;
            this.tableDataTemp2 = res.data.data;
          } else {
            // 高气压电离室
            this.tableData3 = res.data.data;
            this.tableDataTemp3 = res.data.data;
          }
        }
      });
    },
    // 获取前端筛选的站点列表
    getStationAll() {
      this.$axios
        .get("/static/emergency/perimeterData/stationSelect.json")
        .then((res) => {
          // listAll().then((res) => {
          for (let item of res.data.data) {
            this.stationList.push({ text: item.name, value: item.name });
          }
        });
    },
    // 表格过滤
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    // 切换tab时重新加载数据
    handleClick(tab, event) {
      console.log(tab.name);
      if (tab.name == "first") {
        // this.getPerimeterData1();
        this.getPerimeterData(0);
        this.flag1 = false;
        this.heightlight = 1;
      } else if (tab.name == "second") {
        // this.getPerimeterData2();
        this.getPerimeterData(1);
        this.flag2 = false;
        this.heightlight = 2;
      } else {
        this.getPerimeterData(2);
        this.flag3 = false;
        this.heightlight = 3;
      }
      this.firstImgl = !this.firstImgl;
    },
    // 前端实现查询功能
    search1() {
      this.flag1 = true;
      const key = this.formInline1.name;
      const vm = this;
      this.searchData1 = [];
      console.log("查询前", this.tableDataTemp1);
      this.tableDataTemp1.forEach(function (item) {
        if (item.sysName.indexOf(key) > -1) {
          vm.searchData1.push(item);
        }
      });
      // this.resetData1 = this.tableData1;
      this.tableData1 = this.searchData1;
      console.log("查询后", this.tableData1);
    },
    search2() {
      this.flag2 = true;
      const key = this.formInline2.name;
      const vm = this;
      this.searchData2 = [];
      this.tableDataTemp2.forEach(function (item) {
        if (item.sysName.indexOf(key) > -1) {
          vm.searchData2.push(item);
        }
      });
      // this.resetData2 = this.tableData2;
      this.tableData2 = this.searchData2;
    },
    search3() {
      this.flag3 = true;
      const key = this.formInline3.name;
      const vm = this;
      this.searchData3 = [];
      console.log(this.tableData3, "===============");
      this.tableDataTemp3.forEach(function (item) {
        if (item.sysName.indexOf(key) > -1) {
          vm.searchData3.push(item);
        }
      });
      // this.resetData1 = this.tableData1;
      this.tableData3 = this.searchData3;
    },
    // 重置数据
    reset1() {
      this.getPerimeterData(0);
      this.formInline1 = {
        name: "",
      };
    },
    reset2() {
      this.getPerimeterData(1);
      this.formInline2 = {
        name: "",
      };
    },
    reset3() {
      this.getPerimeterData(2);
      this.formInline3 = {
        name: "",
      };
    },
    // 查看-GM管
    handleDetail1(row) {
      console.log(row, "row");
      this.page = 1;
      this.id = row.sysId;
      this.status = row.status;
      this.name = row.stationName;
      this.sys = row.sysName;
      this.level1 = row.levelOne;
      this.level2 = row.levelTwo;
    },
    handleDetail2(row) {
      console.log(row, "row");
      this.page = 3;
      this.id = row.sysId;
      // this.status = row.status;
      this.name = row.stationName;
      this.sys = row.sysName;
      this.level1 = row.levelOne;
      this.level2 = row.levelTwo;
    },
    handleDetail3(row) {
      console.log(row, "row");
      this.page = 2;
      this.id = row.sysId;
      this.status = row.status;
      this.name = row.stationName;
      this.sys = row.sysName;
      this.level1 = row.levelOne;
      this.level2 = row.levelTwo;
    },
    // 时间戳转时间格式
    timestampToTime(timestamp) {
      var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },

    back() {
      this.page = 0;
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  height: 40px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 10px 20px 10px;
  .title-name {
    width: 80px;
  }
  .title-refresh {
    width: 70px;
    color: #1890ff;
    text-align: right;
    padding-right: 15px;
  }
}
#cefr-box.app-container {
  padding: 0px;
  ::v-deep.el-card {
    border: 0px;
  }
  ::v-deep.el-card.is-always-shadow {
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 0%);
  }

  ::v-deep.el-card__body {
    padding: 0px;
  }
}
// tab
::v-deep .el-tabs__nav {
  width: 100%;
}
::v-deep .el-tabs__item {
  width: 33.34%;
  text-align: center;
  height: 40px;
  // padding-top: 2px;
  // padding-bottom: 4px;
}
// el-form
::v-deep .el-form {
  height: 55px;
  padding: 10px;
  .el-form-item__label {
    font-size: 14px;
    font-weight: bold;
    color: black;
  }
}
::v-deep .el-input__inner {
  width: 200px;
  height: 28px;
  font-size: 14px;
}
// .el-button {
//   height: 28px;
//   width: 64px;
//   font-size: 14px;
//   line-height: 5px;
// }
// table
::v-deep .el-table {
  // height: 460px;
  border: 0;
  padding-left: 10px;
  th,
  tr,
  td {
    border: 0;
  }
  &::before {
    height: 0px;
  }
  &::after {
    width: 0;
  }
  .el-table__fixed:before {
    height: 0;
  }
  // 去掉表格下划线
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
    color: black;
    font-size: 14px;
  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 40px;
  }
  // 去掉表头下划线
  thead tr th.is-leaf {
    border: 0px solid #ebeef5;
    border-right: none;
  }
}
// 检测状态
.zc {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: green;
  margin: auto 9px;
}
.yjbj {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: #e19b16;
  margin: auto 9px;
}
.ejbj {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: #e84b3f;
  margin: auto 9px;
}
.lx {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: gray;
  margin: auto 9px;
}
</style>
